.chat-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  .chat-header {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 60px;
    padding: 10px 20px;

    .chat-target {
      display: flex;

      .avatar-list {
        .avatar {
          margin-right: 10px;
        }
      }

      .chat-info {
        .name {
          line-height: 18px;
          font-size: 18px;
          vertical-align: top;
        }

        .hint {
          color: #aaa;
          font-size: 12px;
          line-height: 12px;
          margin-top: 10px;
          vertical-align: bottom;
        }
      }
    }
  }

  .message-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 10px 20px;

    > li {
      margin-bottom: 20px;
    }

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .input {
    flex-shrink: 0;
    width: 100%;
    padding: 20px;

    > textarea {
      border-top: solid 1px #eee;
      padding: 0;
      padding-top: 10px;
    }
  }
}
